<template>
  <div class="set-page">
    <ul class="set-page-top">
      <li class="set-page-top-item">
        <img
          class="set-page-top-item-img"
          src="../../../assets/home/rz-icon-add.png"
        />
        <span class="set-page-top-item-span" @click="addField">新增字段</span>
      </li>
      <li class="set-page-top-item">
        <img
          class="set-page-top-item-img"
          src="../../../assets/home/rz-icon-sx.png"
        />
        <span class="set-page-top-item-span">调整顺序</span>
      </li>
    </ul>

    <ul class="set-page-bottom">
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{
          background: '#f7f7f7',
          color: '#333',
          fontSize: '14px',
          fontweight: '400',
        }"
        max-height="250"
      >
        <el-table-column prop="date" label="字段名称"> </el-table-column>
        <el-table-column prop="name" label="类型"> </el-table-column>
        <el-table-column prop="province" label="要求员工必填">
        </el-table-column>
        <el-table-column prop="city" label="在入职登记表显示">
        </el-table-column>
        <el-table-column prop="address" label="员工在个人档案可见">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="changeField(scope.row)"
              type="text"
              size="small"
            >
              编辑
            </el-button>
            <el-button
              @click.native.prevent="deleteRow(scope.row)"
              type="text"
              size="small"
            >
              停用
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="mt-2"
        background
        style="text-align: center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="2"
        :page-sizes="[100, 200, 500, 400]"
        :page-size="3"
        layout=" prev, pager, next, jumper"
        :total="5"
      >
      </el-pagination>
    </ul>
    <!-- 弹窗 -->
    <el-dialog
      :visible.sync="isStartUsing"
      width="375px"
      class="tc">
      <ul>
        <li class="t-img">
          <img src="../../../assets/home/rz_tixiang.png">
        </li>
        <li class="t-title" style="fontSize:18px">确定停用该字段?</li>
      </ul>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="isStartUsing = false">确 定</el-button>
        <el-button @click="isStartUsing = false">取 消</el-button>
      </span>
    </el-dialog>
    <addField :dialogVisible='dialogVisible' :changePopping='changePopping' />
  </div>
</template>

<script>
import addField from '../../components/attestation/components/addField.vue'
export default {
  components:{addField},
  methods: {
    deleteRow(rows) {
      this.isStartUsing =true
      // rows.splice(index, 1);
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {},
    //新增字段
    addField(){
      this.clickType = 0
      this.dialogVisible = true
    },
    //点击编辑
    changeField(row){
      this.clickType = 1
      this.dialogVisible = true
    },
    //控制子组件弹出显示
    changePopping(){
      this.dialogVisible = false
    },
  },
  data() {
    return {
      tableData: [],//表格数据
      dialogVisible:false,//是否弹窗
      clickType:0,//新增或者编辑
      isStartUsing:false,//启用弹窗
    };
  },
};
</script>

<style>
</style>